<template>
	<view class="notification">
		<scroll-view ref="scrollView" scroll-y="true" :refresher-enabled="refresher" :refresher-triggered="triggered"
			@refresherrefresh="refresh()" @scrolltolower="reachBottom()">
			<view class="notification-head">
				<view class="operation">
					<view class="operation-item">
						<view class="circular-box" style="background: #55aaff;">
							<u-icon class="circular-icon" name="chat" size="48"></u-icon>
						</view>
						<view class="item-text">评论</view>
					</view>
					<view class="operation-item">
						<view class="circular-box" style="background: #ffaa00;">
							<u-icon class="circular-icon" name="heart" size="48"></u-icon>
						</view>
						<view class="item-text">关注</view>
					</view>
					<view class="operation-item">
						<view class="circular-box" style="background: #00c1c1;">
							<u-icon class="circular-icon" name="thumb-up" size="48"></u-icon>
						</view>
						<view class="item-text">点赞</view>
					</view>
				</view>
			</view>
			<u-gap height="15" bg-color="#f5f5f5"></u-gap>
			<view class="notification-content">
				<view v-if="list.length>0">
					<notification-list :list="list"></notification-list>
				</view>
				<!-- 空数据 -->
				<u-empty v-else text="本来无一物,何处惹尘埃" src="/static/platform/svg/spring.svg" font-size="32" icon-size="320"
					mode="message" margin-top="300"></u-empty>
			</view>
		</scroll-view>
		<buttom-tabbar ref="buttomTabbar"></buttom-tabbar>
	</view>
</template>

<script>
	import NotificationList from '@/pages/platform/notification/notification-list.vue'
	export default {
		name: 'notification',
		components: {
			NotificationList
		},
		data() {
			return {
				queryParam: {
					pageNo: 0,
					pageSize: 10,
					regionId: undefined
				},
				list: [],
				triggered: false,
				refresher: true
			}
		},
		created() {
			this.init()
		},
		onShow() {
			uni.$on('clearNotification', (data) => {
				this.clearNotification(data)
				if (this.$refs.buttomTabbar) {
					this.$refs.buttomTabbar.getUnNotificationCount()
				}
			});
		},
		methods: {
			initWebSocket() {
				uni.$on('notification', (data) => {
					this.handleNotification(JSON.parse(data))
				});
			},
			handleNotification(notification) {
				const index = this.list.findIndex(item => item.type === notification.type)
				if (index !== -1) {
					if (notification.type === "0") {
						this.list[index].systemUnread = parseInt(this.list[index].systemUnread) + 1
						this.list[index].content = notification.content
					} else if (notification.type === "1") {
						this.list[index].regionUnread = parseInt(this.list[index].regionUnread) + 1
						this.list[index].postTitle = notification.postTitle
					}
					this.list[index].createTime = notification.createTime

				} else {
					if (notification.type === "0") {
						notification.systemUnread = "1"
					} else if (notification.type === "1") {
						notification.regionUnread = "1"
					}
					this.list.unshift(notification)
				}


			},
			clearNotification(type) {
				const index = this.list.findIndex(item => item.type === type)
				if (this.list[index].type === "0") {
					this.list[index].systemUnread = "0"
				} else if (this.list[index].type === "1") {
					this.list[index].regionUnread = "0"
				}


			},
			resetQuery() {
				this.queryParam.pageNum = 1
			},
			refresh() {
				this.triggered = true
				this.resetQuery()
				this.getNotificationList()
				setTimeout(() => {
					// 停止下拉刷新
					this.triggered = false;
				}, 500)
			},
			reachBottom() {
				this.getNextNotificationList()
			},
			getNextNotificationList() {
				this.queryParam.pageNo += 10
				this.$u.api.notificationData.list(this.queryParam).then(res => {
					const length = res.data.records.length
					if (length > 0) {
						this.list.push(...res.data.records)
					}
				})

			},
			init() {
				if (this.$store.state.region) {
					this.queryParam.regionId = this.$store.state.region.id
				}
				this.getNotificationList()
				this.initWebSocket()
			},
			getNotificationList() {
				this.$u.api.notificationData.list(this.queryParam).then(res => {
					if (res.data.records) {
						this.list = res.data.records
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notification {
		.notification-head {
			padding: 0 80rpx;

			.operation {
				display: flex;
				justify-content: space-between;

				.operation-item {

					.circular-box {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						margin-top: 20rpx;
						margin-bottom: 10rpx;
						background-color: #F6F5FA;
						border-radius: 50%;

						.circular-icon {
							color: #fff;
							display: flex;

						}
					}

					.item-text {
						color: #000;
						display: flex;
						margin-left: 20rpx;
						margin-bottom: 40rpx;
					}
				}

			}
		}
	}
</style>